<template>
  <div>
    <el-dialog
      title="我的医生"
      :visible.sync="show"
      width="60%"
    >

      <div>
        <el-row>
          <el-col :span="8" v-for="(item,index) in myDoctorList" :key="index">
            <div @click="showDetail(item)">
              <el-card style="cursor: pointer;" shadow="hover">

                <el-row :gutter="20">
                  <el-col :span="12">
                    <img style="width: 100%" height="200" class="hide-sm"
                         :src="item.photo === ''?'/static/img/avatar.png':item.photo">
                  </el-col>
                  <el-col :span="12">
                    <div style="font-size: 18px;font-weight: bold;">{{ item.doctorName }}</div>
                    <div class="info-item">性别：<span>{{ $dictUtils.getDictLabel("sex", item.gender, '-') }}</span></div>
                    <div class="info-item">年龄：<span>{{ item.age }}</span></div>
                    <div class="info-item">科室：<span>{{ $officeUtils.getOfficeName(item.deptId, '--') }} </span></div>
                    <div class="info-item">电话：<span>{{ item.doctorPhone }}</span></div>
                    <div class="info-item">简介：<span>{{ item.doctorDesc }}</span></div>
                  </el-col>
                </el-row>

              </el-card>
            </div>

          </el-col>
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">关 闭</el-button>
      </span>

      <el-dialog
        title="就诊跟踪"
        :visible.sync="timeLineDetailVisible"
        width="80%"
        append-to-body
      >
        <div style="height: calc(100vh - 300px)">

        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="timeLineDetailVisible = false">关 闭</el-button>
        </div>
      </el-dialog>

    </el-dialog>


  </div>
</template>

<script>

import visitInfoService from '@/api/visit/visitInfoService'

export default {
  name: 'TimeLine',
  data () {
    return {
      timeLineDetailVisible: false,
      myDoctorList: [],
      show: false,
      id: ''
    }
  },

  methods: {
    init (id) {
      this.id = id
      this.show = true
      this.getDoctorList()
    },

    showDetail (item) {
      console.log('s')
      this.timeLineDetailVisible = true
    },

    getDoctorList () {
      visitInfoService.getMyDoctors(this.id).then(res => {
        console.log(res.data)
        this.myDoctorList = res.data
      })
    }
  }

}
</script>

<style scoped lang="scss">
.info-item {
  margin-top: 6px;
  font-size: 14px;
  color: #606266;
}
</style>
